<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/mine/mineBg.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="绩效考核" :showBack="true"></cusHeaderVue>
		<scroll-view scroll-y="true"
			:style="{paddingTop: `calc(${scrollerHeight} + 90rpx)`,height: `calc(100vh - ${scrollerHeight} - 90rpx)`}"
			refresher-enabled="true"
			refresher-background="#ffffff"
			refresher-color="#fd6702"
			@refresherrefresh="onRefresh">
			<view class="contBox">
				<view v-if="performanceList.length > 0">
					<view class="contLi" v-for="(item,index) in performanceList" :key="index">
						<view class="contTop">
							<view class="contName">
								{{ formatMonth(item.monthlyStr) }}绩效考核
							</view>
							<view class="contNum">
								{{ item.completionRate }}%
							</view>
						</view>
						<view class="contInfo">
							<view class="infoItem">
								<text class="infoLabel">门店数：</text>
								<text class="infoValue">{{ item.shopNum || 0 }}</text>
							</view>
							<view class="infoItem">
								<text class="infoLabel">打卡数：</text>
								<text class="infoValue">{{ item.dkNum || 0 }}</text>
							</view>
							<view class="infoItem">
								<text class="infoLabel">任务数：</text>
								<text class="infoValue">{{ item.taskNum || 0 }}</text>
							</view>
							<view class="infoItem">
								<text class="infoLabel">已提交任务：</text>
								<text class="infoValue">{{ item.taskNumSubmit || 0 }}</text>
							</view>
							<view class="infoItem">
								<text class="infoLabel">理论销售额：</text>
								<text class="infoValue">{{ formatCurrency(item.plannedSales || 0) }}</text>
							</view>
							<view class="infoItem">
								<text class="infoLabel">实际销售额：</text>
								<text class="infoValue">{{ formatCurrency(item.actualSales || 0) }}</text>
							</view>

							<view class="infoItem">
								<text class="infoLabel">分数：</text>
								<text class="infoValue">{{  item.userScore || 0  }} 分</text>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="empty">
					暂无绩效考核数据
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import cusHeaderVue from '@/components/cus-header.vue';
	import { GETPerformanceAssessment } from '@/api/interface.js';
	const scrollerHeight = ref('');
	const performanceList = ref([]);

	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(res) {
				scrollerHeight.value = res.statusBarHeight + 'px'
			}
		});
	}

	// 格式化月份显示
	const formatMonth = (monthStr) => {
		if (!monthStr) return '';
		// 假设monthStr格式为"YYYY-MM"
		const parts = monthStr.split('-');
		if (parts.length === 2) {
			return `${parts[0]}年${parts[1].padStart(2, '0')}月`;
		}
		return monthStr;
	}

	// 格式化金额显示
	const formatCurrency = (value) => {
		if (typeof value !== 'number') {
			value = parseFloat(value) || 0;
		}
		// 保留两位小数并添加千分位
		return '¥' + value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	}

	// 获取绩效考核数据
	const getPerformanceData = async () => {
		try {
			// 从本地存储获取用户信息
			const userInfo = uni.getStorageSync('userInfo');
			const params = {
				uid: userInfo?.id || '',
				pageNo: '1',
				pageSize: '10'
			};
			
			const res = await GETPerformanceAssessment(params);
			if (res.code === 0 && res.data) {
				// 按月份倒序排列，最新的在前面
				performanceList.value = (res.data.list || []).sort((a, b) => {
					return new Date(b.monthlyStr + '-01') - new Date(a.monthlyStr + '-01');
				});
			} else {
				uni.showToast({
					title: res.message || '获取数据失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('获取绩效考核数据失败:', error);
			uni.showToast({
				title: '获取数据失败，请重试',
				icon: 'none'
			});
		}
	}
	
	const toUrl = (urlSrc) => {
		uni.navigateTo({
			url: urlSrc
		})
	}
	
	// 下拉刷新处理函数
	const onRefresh = async () => {
		// 重新获取绩效考核数据
		await getPerformanceData();
		// 停止下拉刷新动画
		uni.stopPullDownRefresh();
	}
	onLoad(() => {
		getBarHeight();
		getPerformanceData();
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.bgColor {
		width: 100%;
		height: 100vh;
		position: absolute;
		z-index: -1;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		padding: 22rpx;
		box-sizing: border-box;
		padding-bottom: calc(env(safe-area-inset-bottom) + 101rpx);
		
		.contLi{
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: #ffffff;
			box-shadow: 0 3.85rpx 13.46rpx 0 #b6b7b933;
			margin-bottom: 25rpx;
			padding: 39rpx 27rpx;
			box-sizing: border-box;
		}

		.contTop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			.contName{
				font-weight: 600;
				font-size: 33.33rpx;
				color: #1C2027;
				flex: 1;
			}
			.contNum{
				font-size: 24.36rpx;
				font-weight: 500;
				color: #FFFFFF;
				border-radius: 6.41rpx 6.41rpx 6.41rpx 6.41rpx;
				background: linear-gradient(90deg, #fd6702,#ffaa57);
				width: 81rpx;
				height: 39rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.contInfo {
			margin-top: 25rpx;
		}
		
		.infoItem {
			display: flex;
			justify-content: space-between;
			padding: 15rpx 0;
			font-size: 26.67rpx;
			
			.infoLabel {
				color: #7F8494;
			}
			
			.infoValue {
				color: #1C2027;
				font-weight: 500;
			}
		}
		
		.empty {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 300rpx;
			font-size: 28rpx;
			color: #999999;
			background: #ffffff;
			border-radius: 12.82rpx;
		}
	}
	
</style>